import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import KeyboardBackspaceIcon from "@mui/icons-material/KeyboardBackspace";

import CreatedRoom from "./components/CreatedRoom";

import "./index.scss";

const PkRoom = () => {
  const [IsAcitve, setIsAcitve] = useState(1);

  const [open, setOpen] = React.useState(false);

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  const navigate = useNavigate();

  /**
   * 返回上一页
   */
  function handleGoBack() {
    navigate(-1); // 或者使用 history.go(-1)
  }

  /**
   * 跳转页面
   * @param url
   */
  function gotoPage(url: string) {
    navigate(url);
  }

  /**
   * 表单类别切换
   */

  const tabActive = (num: number) => {
    setIsAcitve(num);
  };

  // 列表数据
  const listData = [] as any;

  for (let i = 1; i < 20; i++) {
    const ran = Math.floor(Math.random() * 2);
    listData.push({
      id: i,
      name: "房间2",
      datetime: "2024-12-01  12:00",
      type: ran,
      power: Math.floor(Math.random() * 100),
    });
  }

  return (
    <>
      <div className="pk-room-container">
        {/* 货币数量 */}
        <div className="currency-items">
          <div className="item-box">
            <img className="img-icon" src="/images/diamond2.png" />
            <div className="show-box">
              <span className="value">460</span>
            </div>
          </div>
          <div className="item-box">
            <img className="img-icon" src="/images/ton.png" />
            <div className="show-box">
              <div className="left-box">
                <span className="value">460</span>
                <span className="unit">TON</span>
              </div>
              <div className="right-box">
                <img className="img-icon" src="/images/room_add.png" />
              </div>
            </div>
          </div>
        </div>
        {/* 列表 */}
        <div className="room-list-box">
          <div className="tab-box">
            <div
              className={IsAcitve == 1 ? "item active" : "item"}
              onClick={() => {
                tabActive(1);
              }}
            >
              钻石赛场
            </div>
            <div
              className={IsAcitve == 2 ? "item active" : "item"}
              onClick={() => {
                tabActive(2);
              }}
            >
              TON赛场
            </div>
          </div>
          {/* 筛选-创建房间 */}
          <div className="head-box">
            <div className="select-box">
              <span className="attr-name">排序</span>
              <select className="sort-select" name="sort-type" id="sortType">
                <option value="1">金额从大到小</option>
                <option value="2">金额从小到大</option>
              </select>
            </div>
            <div
              className="created-btn"
              onClick={() => {
                handleClickOpen();
              }}
            >
              创建房间
            </div>
          </div>
          {/* 列表 */}
          <div className="room-list">
            <ul>
              {listData.map((item: any) => (
                <li key={item.id} className="item">
                  <div className="item-box">
                    <div className="photo-box">
                      <img src="../images/dinosaur2.png" />
                    </div>
                    <div className="cnetre-box">
                      <div className="name-box">
                        <span className="name">艾琳娜</span>
                        <img className="img-icon" src="/images/grade_1.png" />
                        <span className="status">青铜I</span>
                      </div>
                      <div className="introduce">
                        <span className="txt">所需： 1000 </span>
                        <span className="unit">TON</span>
                      </div>
                      <div className="remarks">备注：至少PK10场</div>
                    </div>
                    <div className="right-box">
                      <div className="room-name">房间一号</div>
                      <div className="btn" onClick={()=>{gotoPage("/pk/game")}}>立即PK</div>
                    </div>
                  </div>
                </li>
              ))}
            </ul>
          </div>
        </div>

        {/* 返回 */}
        <div className="bottom-box">
          <div className="return-back-btn" onClick={handleGoBack}>
            <KeyboardBackspaceIcon />
            <span>返回</span>
          </div>
        </div>
      </div>
      {/* 创建房间 */}
      <CreatedRoom open={open} onClose={handleClose} />
    </>
  );
};

export default PkRoom;
